import {Panel, LayerLink} from 'comps/common';
import {Table, Menu, Dropdown, Icon, Button, Modal} from 'antd';
const confirm = Modal.confirm;
import * as React from 'react';
import ServiceManageSearch from '../containers/service-manager-search';
import EnvironmentAddModal from './environment-add'

class EnvironmentManagerMenu extends React.Component {

  constructor(props) {
    super(props);
  }

  removeEnvironmentConfirm() {
    const props = this.props
    confirm({
      title: '您是否确认要删除该环境?',
      onOk() {
        props.onEnvironmentRemove(props.id)
      }
    });
  }

  showEnvironmentUpdateModal() {
    this.props.showEnvironmentUpdateModal(this.props.environment)
  }

  menu = (
    <Menu>
      <Menu.Item key="1">
        <a onClick={::this.showEnvironmentUpdateModal}>修改</a>
      </Menu.Item>
      <Menu.Item key="2">
        <a onClick={::this.removeEnvironmentConfirm}>删除</a>
      </Menu.Item>
    </Menu>
  );

  render() {
    return (
      <Dropdown overlay={this.menu} trigger={['click']}>
        <a className="ant-dropdown-link" href="#">
          管理 <Icon type="down"/>
        </a>
      </Dropdown>
    )

  }
}

class EnvironmentList extends React.Component {
  constructor(props) {
    super(props);
  }

  columns = [
    {
      title: '环境名称',
      dataIndex: 'name',
      key: 'name',
      render(name, record){
        return <LayerLink component={ServiceManageSearch} data={{record: record}}>{name}</LayerLink>
      }
    }, {
      title: '注册中心地址',
      dataIndex: 'registry',
      key: 'registry'
      //}, {
      //  title: '状态',
      //  dataIndex: 'status',
      //  key: 'status'
    }, {
      title: '操作',
      dataIndex: 'id',
      key: 'id',
      render: ::this.renderEnvironmentManagerMenu
    }
  ];

  renderEnvironmentManagerMenu(id, environment) {
    return <EnvironmentManagerMenu id={id} environment={environment} environmentAddModal={this.refs.environmentAddModal}
      onEnvironmentRemove={this.props.onEnvironmentRemove}
      showEnvironmentUpdateModal={::this.showEnvironmentUpdateModal}/>
  }

  showEnvironmentAddModal() {
    const modal = this.refs.environmentAddModal;
    modal.showModal();
  }

  showEnvironmentUpdateModal(environment) {
    const modal = this.refs.environmentAddModal;
    modal.showModal(environment);
  }

  render() {
    return (
      <div>
        <Panel title='操作'>
          <Button size="small" onClick={::this.showEnvironmentAddModal}>新增环境</Button>
        </Panel>
        <Panel title="环境列表">
          <Table dataSource={this.props.environmentList} columns={this.columns} pagination={false} size="middle"
            rowKey={record => record.id}/>
          <EnvironmentAddModal onSave={this.props.onEnvironmentSave} ref="environmentAddModal"/>
        </Panel>
      </div>
    );
  }
}

export default EnvironmentList;
